<template>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :page-count="total" />
  </div>
</template>

<script lang="ts" setup>
import { themePinia } from '@/libs/pinia/theme';
import { computed } from 'vue';

const props = defineProps(["total"]);
const theme=themePinia()
const PaginationBackgroundColor=computed(()=>theme.PaginationBackgroundColor)
const PaginationActiveBackgroundColor=computed(()=>theme.PaginationActiveBackgroundColor)
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: v-bind(PaginationBackgroundColor);
  padding: 1.2rem;
  border-radius: 0.5rem;
  margin-top: 1.2rem;
  :deep(.is-active){
    background-color: v-bind(PaginationActiveBackgroundColor) !important;
  }
}
</style>
